<template>
  <div>
    <el-card>
      <div slot="header" class="card-header">
        <span style="font-size: 120%;">{{title}}</span>
        <vxe-input v-model.trim.lazy="filterName" type="search" placeholder="快捷检索" @input="searchEvent"></vxe-input>
      </div>
      <div>
        <vxe-table resizable ref="XTable" show-overflow border height="528" stripe highlight-hover-row
          highlight-current-row resizable :loading="loading" :data="dataList" @sort-change="sortChange"
          :export-config="{}">
          <vxe-column field="examinationPaperTitle" title="试卷标题" sortable></vxe-column>
          <vxe-column field="playerName" title="运动员" sortable></vxe-column>
          <vxe-column field="phoneNumber" title="联系方式" sortable></vxe-column>
          <vxe-column field="createDateAuto" title="提交时间" sortable></vxe-column>
          <vxe-column field="" title="操作" width="150">
            <template #default="{ row }">
              <el-button @click="examinationPreview(row)" type="primary" size="small" icon="el-icon-view">查看答题情况</el-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager :loading="loading" :current-page="page.currentPage" :page-size="page.pageSize"
          :total="page.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handlePageChange">
        </vxe-pager>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    paper_submit_preview
  } from '@/api/person.js'
  export default {
    props: ['examinationPaperId','title'],
    data() {
      return {
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0
        },
        defaultDataList: [],
        dataList: [],
        loading: false,
        filterName: '',
        insert: false,
      }
    },
    created() {
      this.getSbmitPaper()
    },
    watch: {
      examinationPaperId(val) {
        if(val){
          this.getSbmitPaper()
        }
      }
    },
    methods: {
      examinationPreview(row) {
        this.$emit('examinationPreview',row)
      },
      getSbmitPaper() {
        this.loading = true
        paper_submit_preview(this.examinationPaperId).then(res => {
          if (res.code === 200 && res.data.length != 0) {
            this.defaultDataList = res.data
          } else {
            this.defaultDataList = []
          }
        }).then(()=>{
          this.findList()
        })
      },
      searchEvent() {
        const filterName = this.$XEUtils.toValueString(this.filterName).trim().toLowerCase()
        if (filterName) {
          const filterRE = filterName
          const searchProps = ['examinationPaperTitle','playerName','phoneNumber','createDateAuto']
          const rest = this.defaultDataList.filter(item => searchProps.some(key => this.$XEUtils.toValueString(item[
            key]).toLowerCase().indexOf(filterName) > -1))
          this.dataList = rest.map(row => {
            const item = Object.assign({}, row)
            searchProps.forEach(key => {
              item[key] = this.$XEUtils.toValueString(item[key]).replace(filterRE, match => match)
            })
            return item
          })
          this.page = {
            currentPage: 1,
            pageSize: this.dataList.length,
            totalResult: this.dataList.length
          }
          this.search = true
        } else {
          this.dataList = this.defaultDataList
        }
      },
      handlePageChange({
        currentPage,
        pageSize
      }) {
        this.page.currentPage = currentPage
        this.page.pageSize = pageSize
        this.findList()
      },
      sortChange() {
        if (!this.search) {
          this.page.pageSize = this.defaultDataList.length
          this.findList()
        } else {
          this.page.pageSize = this.dataList.length
        }
      },
      findList() {
        setTimeout(() => {
          this.page.totalResult = this.defaultDataList.length
          this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
            .pageSize, this.page.currentPage * this.page.pageSize)
          this.loading = false
          if(this.insert){
            this.$refs.XTable.setCurrentRow(this.dataList[0])
            this.insert = false
          }
        }, 300)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
